<template>
  <el-container>
    <el-main style="padding-top: 100px;height: 680px;">

      <div v-if="!show">
        <el-row style="padding: 20px;">
          <el-col :span="9" style="text-align: center">
            选择您的找回方式：
          </el-col>
          <el-col :span="4" :offset="1">
            <el-button @click="codeShow=true" border v-focus>电话</el-button>
          </el-col>
          <el-col :span="4" :offset="4">
            <el-button @click="codeShow=false" border>邮箱</el-button>
          </el-col>
        </el-row>
      </div>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <div v-if="!show">
          <el-row>
            <el-form-item label="电话" prop="phone" v-if="this.codeShow">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="mail" v-if="!this.codeShow">
              <el-input v-model="ruleForm.mail"></el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-col :span="14">
              <el-form-item label="验证码" prop="code">
                <el-input v-model="ruleForm.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="2">
              <el-button @click="visible = true" round :disabled="this.flag">获得验证码</el-button>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="next('ruleForm')">下一步</el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <div v-if="show">
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPassword">
            <el-input v-model="ruleForm.checkPassword" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
          </el-form-item>
        </div>
      </el-form>


      <el-dialog :visible.sync="visible" width="72%">
        <slide-verify :l="42"
                      :r="10"
                      :w="310"
                      :h="155"
                      @success="onSuccess"
                      @fail="onFail"
                      :slider-text="text"
        ></slide-verify>
      </el-dialog>

    </el-main>
    <el-footer>
      <el-steps :active="this.active" simple>
        <el-step title="验证" icon="el-icon-edit"></el-step>
        <el-step title="重设密码" icon="el-icon-upload"></el-step>
      </el-steps>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "Retrieve",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 5 || value.length > 19) {
        callback(new Error('请输入6-18位的密码'));
      } else {
        if (this.ruleForm.checkPassword !== '') {
          this.$refs.ruleForm.validateField('checkPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    };
    var checkCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else if (value != this.reCode) {
        callback(new Error('验证码错误'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        password: '',
        checkPassword: '',
        phone: '',
        mail: '',
        code: ''
      },
      reCode: '',
      show: false,
      codeShow: true,
      active: 0,
      flag: false,
      visible: false,
      msg: '',
      text: '向右滑',
      rules: {
        password: [
          {validator: validatePass, required: true, trigger: 'blur'}
        ],
        checkPassword: [
          {validator: validatePass2, required: true, trigger: 'blur'}
        ],
        phone: [
          {validator: checkPhone, trigger: 'blur'}
        ],
        mail: [
          {type: 'email', message: '请输入正确的邮箱号', trigger: ['blur', 'change']}
        ],
        code: [
          {validator: checkCode, trigger: 'blur'}
        ]
      }
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (s) => {
        if (s) {
          const {data: res} = await this.$http.post("http://localhost:9000/user/retrieve", this.ruleForm);
          if (res === "ok") {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            });
            this.$router.push("/login")
          } else {
            console.log('error submit!!');
            return false;
          }
        }
      });
    },
    onSuccess() {
      this.getCode();
      this.visible = false;
    },
    onFail() {
      this.$message.error('验证失败');
    },
    getCode() {
      //电话验证
      if (this.ruleForm.phone !== "") {
        this.flag = true;
        setTimeout(() => {
          this.flag = false;
        }, 60000)
        this.$http.post("http://localhost:9000/user/getCodeBySms", {
          phone: this.ruleForm.phone
        }).then((res) => {
          this.reCode = res.data;
        })
      }
      //邮箱
      if (this.ruleForm.mail !== "") {
        this.flag = true;
        setTimeout(() => {
          this.flag = false;
        }, 60000)
        this.$http.post("http://localhost:9000/user/getCodeByMail", {
          mail: this.ruleForm.mail
        }).then((res) => {
          this.reCode = res.data;
        })
      }
    },
    next(formName) {
      this.$refs[formName].validate(async (s) => {
        if (s) {
          this.show = true;
          this.active++;
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
